import { memo, useState, useEffect } from 'react';
// import { useProducts } from '@/services/product';
import { Grid, InfiniteScroll, PullToRefresh } from 'antd-mobile';
import { UpOutline } from 'antd-mobile-icons';
import axios from 'axios';
import ProductCard from '../ProductCard';
import style from './index.module.less';
import { useScrollToTopButton } from '../../../../hooks/useScrollToTopButton';

interface IProps {
  name: string;
  type: string;
}

/**
 * 商品列表
 */
const ProductList = ({ name, type }: IProps) => {
  // if (data && data.length === 0) {
  //   return (
  //     <ErrorBlock status="empty" />
  //   );
  // }

  const { isVisible, scrollToTop } = useScrollToTopButton({ threshold: 100 });
  const [data, setData] = useState([]);

  const [latitude, setLatitude] = useState(38.820678);
  const [longitude, setLongitude] = useState(115.495566);
  useEffect(() => {
    const getLocation = () => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
          setLatitude(position.coords.latitude);
          setLongitude(position.coords.longitude);
        });
      }
    };
    getLocation();
  }, []);

  useEffect(() => {
    getlist();
  }, [type, name]);

  const getlist = async () => {
    const { data } = await axios.get(`http://localhost:3000/productList?latitude=${latitude}&longitude=${longitude}&type=${type}&schema=${name}`);

    setData(data.data);
  };
  const [onRefreshHandler] = useState(():any => {
    // console.log("onRefreshHandler");
  });

  // const isRetry = false;

  const loadMore = (isRetry: boolean) :any => {
    if (isRetry) {
      // console.log("loadMore");
    }
  };

  const hasMore = false;

  return (
    <div className={style.container}>
      <PullToRefresh onRefresh={onRefreshHandler}>
        <Grid columns={2} gap={10}>
          {data?.map((item:any) => (
            <Grid.Item key={item.id}>
              <ProductCard data={item} />
            </Grid.Item>
          ))}
        </Grid>

        {/* 回顶按钮 */}
        <div
          onClick={scrollToTop}
          style={isVisible ? { right: '10px' } : { right: '-80px' }}
          className={style.backTop}
        >
          <UpOutline />
        </div>
      </PullToRefresh>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
};

export default memo(ProductList);
